<template>
  <div class="merchant-pay-for">
    <ul class="list">
      <template
        v-for="(item, index) in list"
      >
        <li
          v-if="item.payFor"
          :key="index"
          class="list-item"
        >
          <p class="sn"><span class="text">支付订单号:</span> <span class="color">{{ item.sn }}</span></p>
          <p class="user"><span class="text">支付用户ID:</span> <span class="color">{{ item.user_id }}</span></p>
          <p class="amount">
            <span class="text">到帐金额:</span> <span class="color">￥{{ +item.payFor.amount }}</span>
          </p>
          <p class="time"><span class="text">支付时间:</span> <span class="color">{{ item.create_time }}</span></p>
          <p class="time"><span class="text">到帐时间:</span> <span class="color">{{ item.payFor.update_time }}</span></p>
        </li>
      </template>
    </ul>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      @loadMore="loadMore" />
    <loading :show="loading" />
  </div>
</template>

<script>
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import PullUp from '@/components/PullUp'
export default {
  name: 'PayFor',
  components: {
    PullUp,
    Loading
  },
  data() {
    return {
      loading: false,
      list: [],
      queryList: {
        page: 0,
        pageSize: 10,
        busy: false
      }
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Merchant.payFor({
          ...this.queryList
        }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped lang="stylus">
.merchant-pay-for
  .list
    text-align left
    margin-bottom 10px
    .list-item
      background white
      padding 10px
      margin-top 10px
      p
        height 30px
        line-height 30px
        display flex
        .text
          width 100px
          text-align right
        .color
          flex 1
          padding-left 10px
          font-weight 700
        &.amount
          span
            color red
            font-size 16px
        &.time
          color #999

</style>
